<template>
  <dv-border-box-13 class="topCenterFour1" >
      <div class="mainDiv">
        <div class="top_title">
          <span style="">{{title}}</span>
        </div>
        <div class="bottom_content">
          <img :src="img" width="48px" height="48px">
        </div>
        <div class="bottom_content">
          <span class="bottom_content_span">{{ number }} 件</span>
        </div>
      </div>
  </dv-border-box-13>
</template>

<script>
export default {
  name: "topCenterFour",
  props:{
    img:String,
    title:String,
    number:Number,

  },
  data() {
    return {
    };
  },
}
</script>

<style scoped>
.topCenterFour1{
  width: 23%;
  height:90%;
  margin: 1%;
  text-align: center ;
  float: left;
  border-radius: 10px;
  backgroundColor:" rgba(19, 25, 47, 0.6)";
}
.mainDiv{
  width: 100%;
  height: 100%;
  color: white
}
.top_title{
  font-size: 24px;
  font-weight: bold;
  padding-top: 23px;
  width: 100%;
  height: 50px;
}
.bottom_content{
  width: 50%;
  height: 88px;
  float: left;
  padding-left: 10px;
  padding-top: 18px;
}
.bottom_content_span{
  font-size: 26px;
  font-weight: bold;
  width: 100%;
  height: 100%;
  text-align: center;
  margin-left: -35px;
  margin-top: 20px;
}
</style>
